<%@page import="com.windfone.common.Constant"%>
<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ include file="head.jsp"%>
<%@ taglib uri="/WEB-INF/recommend.tld" prefix="windfone"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>配件分類</title>
<%@ include file="headkey.jsp" %>
<script src="js/jquery-1.4.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<style>
#coodoo_Header a {
	font-size: 14px;
	font-weight: bold;
	font-weight: bold;
	font-size: 14px;
	color: #FFFFFF;
	text-decoration: none;
}
</style>
<style>
html{color:black; background:white;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,blockquote,th,td{margin:0; padding:0;}
body{font-size:12px; font-family:Arial, Helvetica, sans-serif;}
img{border:0px; vertical-align:top;}
a{font-size:12px; text-decoration:none;}
a,a:link,a:visited{color:#353535;}
a:hover{color:#fc6900;}	
.floatend{clear:both; line-height:0px; height:0px; font-size:0px;}	

.dl_glist {
	float: left;
	list-style-type: none;
	text-align: center;
	height: 141px;
	padding: 0 5px 5px 5px;
}

.dl_glist li {
	word-break: bread-all;
}

.dl_glist li.img {
	background: white;
}

.dl_glist li.peijianPrice {
	color: #009a00;
	font-weight: bold;
	font-size: 13px;
}

.peijianbox {
	background-color: white;
	border: 0px solid black;
	width: 950px;
}

.peijianbox .t {
	background: url(images/box/box_peijian_tbg.jpg);
	height: 24px;
}

.peijianbox .b {
	background: url(images/box/box_peijian_bg.jpg);
	height: 306px;
	width: 950px;
}

.peijianbox .b .l {
	height: 292px;
	float: left;
	padding: 9px 5px 5px 15px;
	width: 933px;
}

.peijianbox .b .r {
	float: left;
	height: 306px;
	width: 38px;
	background: url(images/box/box_peijian_rline.jpg) no-repeat 50%;
}

.peijianbox .b .r .pri {
	padding: 130px 0 0 10px;
}

.peijianbox .b .r .nxt {
	padding: 10px 0 0 10px;
}

.peijianbox .f {
	background: url(images/box/box_peijian_bbg.jpg);
	height: 17px;
}

.box2 .bgtleft {
	background: url(images/box1/bg25_tleft.jpg);
}

.box2 .bgtbg {
	background: url(images/box1/bg25_tbg.jpg);
}

.box2 .bgtright {
	background: url(images/box1/bg25_tright.jpg);
}

.box2 .bgbleft {
	background: url(images/box1/bg25_bleft.jpg);
}

.box2 .bgbbg {
	background: url(images/box1/bg25_bbg.jpg);
}

.box2 .bgbright {
	background: url(images/box1/bg25_bright.jpg);
}

.box2 .bgbg {
	clear: both;
	border-left: solid 1px #c2c2c2;
	border-right: solid 1px #ddd;
}

.box2 {
	clear: both;
}

.box2 dd.tl {
	float: left;
	width: 7px;
	height: 25px;
}

.box2 dd.tb {
	float: left;
	height: 25px;
}

.box2 dd.tr {
	float: left;
	width: 7px;
	height: 25px;
}

.box2 dd.bl {
	float: left;
	width: 7px;
	height: 7px;
	font-size: 0px;
}

.box2 dd.bb {
	float: left;
	height: 7px;
	font-size: 0px;
}

.box2 dd.br {
	float: left;
	width: 7px;
	height: 7px;
	font-size: 0px;
}

.pjcbox {
	width: 950px;
	clear: both;
	margin: 0 auto 10px auto;
}

.pjcbox div.left {
	float: left;
	width: 240px;
}

.pjcbox div.right {
	float: left;
	width: 700px;
	padding-left: 10px;
}

.pjcbox div.pjtp {
	float: left;
	width: 432px;
}

.pjcbox div.sqzx {
	float: left;
	width: 199px;
	padding-left: 10px;
}

.xkbox {
	clear: both;
	width: 700px;
	margin-top: 10px;
}

.xkbox div.t {
	width: 700px;
	height: 24px;
	background: url(images/pjc_img11.jpg);
}

.xkbox div.bg {
	width: 700px;
	background: url(images/pjc_img12.jpg);
}

.xkbox div.b {
	width: 700px;
	height: 9px;
	background: url(images/pjc_img13.jpg);
}

.rxbox {
	clear: both;
	width: 700px;
	margin-top: 10px;
}

.rxbox div.t {
	width: 700px;
	height: 24px;
	background: url(images/pjc_img14.jpg);
}

.rxbox div.bg {
	width: 700px;
	background: url(images/pjc_img12.jpg);
}

.rxbox div.b {
	width: 700px;
	height: 9px;
	background: url(images/pjc_img13.jpg);
}

div.pjlist {
	/*width: 700px;*/
	padding: 10px 10px;
}

.pjcbox div.tl1 {
	height: 19px;
	background: url(images/t25_yg.jpg) no-repeat;
	font-weight: bold;
	color: #f36420;
	font-size: 14px;
	padding: 6px 0 0 23px;
}

.pjcbox div.gs {
	width: 193px;
	padding: 7px 7px 0 7px;
}

.pjcbox div.tl7 {
	float: left;
	width: 150px;
	height: 17px;
	background: url(images/pc_img1.png) no-repeat;
	font-weight: bold;
	color: #666;
	font-size: 14px;
	padding: 8px 0 0 23px;
}

.pjcbox div.tl7_1 {
	float: left;
	width: 53px;
	text-align: right;
	padding-top: 8px;
}

dl.ctitem1 {
	clear: both;
}

dl.ctitem1 dd.limg {
	float: left;
	width: 14px;
	height: 13px;
	background: url(images/pj_cd.png);
}

dl.ctitem1 dd.ltxt {
	float: left;
	margin-left: 5px;
	color: #ff6d00;
}

div.ctitem1c {
	clear: both;
	background: url(images/pj_crbg.png) repeat-y;
	padding-left: 40px;
	padding-bottom: 10px;
}

div.ctitem1c2 {
	clear: both;
	padding-left: 40px;
	padding-bottom: 10px;
}

div.ctitem1c dl,div.ctitem1c2 dl {
	clear: both;
}

div.ctitem1c dl dd.limg,div.ctitem1c2 dl dd.limg {
	float: left;
	width: 46px;
	height: 15px;
	background: url(images/pj_ci.png);
}

div.ctitem1c dl dd.limg2,div.ctitem1c2 dl dd.limg2 {
	float: left;
	width: 46px;
	height: 15px;
	background: url(images/pj_ci2.png);
}

div.ctitem1c dl dd.ltxt,div.ctitem1c2 dl dd.ltxt {
	float: left;
	margin-left: 5px;
	color: #888888;
}

div.ctitem1c2 dl dd.ltxt a,div.ctitem1c dl dd.ltxt a,div.ctitem1c2 dl dd.ltxt a:link,div.ctitem1c dl dd.ltxt a:link,div.ctitem1c2 dl dd.ltxt a:visited,div.ctitem1c dl dd.ltxt a:visited
	{
	color: #888888;
	text-decoration: none;
}

div.ctitem1c2 dl dd.ltxt a:hover,div.ctitem1c dl dd.ltxt a:hover {
	color: #f7941c;
	text-decoration: none;
}

div.ctitem1tl1 {
	height: 19px;
	background: url(images/t25.jpg) no-repeat;
	font-weight: bold;
	color: #2b9cd8;
	font-size: 14px;
	padding: 6px 0 0 23px;
}

div.ctitem1gs {
	width: 224px;
	padding: 7px 7px 0 7px;
}

.zxzx_title {
	height: 25px;
	line-height: 25px;
	background: url(images/d_img5.png) no-repeat;
	font-weight: bold;
	color: #f26422;
	font-size: 14px;
	padding-left: 23px;
}

.zxzx_item1 {
	color: #767676;
	width: 196px;
	text-align: center;
	padding: 10px 0 10px 0;
}

.zxzx_item2 {
	color: #ff5601;
	font-weight: bold;
	font-size: 20px;
	width: 148px;
	text-align: left;
	background: url(images/zxzx_img2.png) no-repeat 15px;
	padding-left: 48px;
}

.zxzx_item3 {
	width: 196px;
	text-align: center;
}



.box2{clear:both;}
.box2 dd.tl{float:left; width:7px; height:25px;}
.box2 dd.tb{float:left; height:25px;}
.box2 dd.tr{float:left; width:7px; height:25px;}
.box2 dd.bl{float:left; width:7px; height:7px; font-size:0px;}
.box2 dd.bb{float:left; height:7px; font-size:0px;}
.box2 dd.br{float:left; width:7px; height:7px; font-size:0px;}

.box2 div.tl{float:left; width:7px; height:25px;}
.box2 div.tb{float:left; height:25px;}
.box2 div.tr{float:left; width:7px; height:25px;}
.box2 div.bl{float:left; width:7px; height:7px; font-size:0px;}
.box2 div.bb{float:left; height:7px; font-size:0px;}
.box2 div.br{float:left; width:7px; height:7px; font-size:0px;}

.box2 .ygtleft{background:url(images/box1/yg_tleft.jpg);}
.box2 .ygtbg{background:url(images/box1/yg_tbg.jpg);}
.box2 .ygtright{background:url(images/box1/yg_tright.jpg);}
.box2 .ygbleft{background:url(images/box1/yg_bleft.jpg);}
.box2 .ygbbg{background:url(images/box1/yg_bbg.jpg);}
.box2 .ygbright{background:url(images/box1/yg_bright.jpg);}
.box2 .ygbg{clear:both; border-left:solid 1px #c2c2c2; border-right:solid 1px #c2c2c2;}
</style>
</head>
<body style="background-color: #000000;"> 
	<%@ include file="navigate.jsp" %>
<div   style="background-color:#FFFFFF;width: 950px;margin:0 auto;">



<div class="pjcbox" id="pjcbox">
<div class="left" id="leftDiv">
<dl class="box2">
	<dd class="tl bgtleft"></dd>
	<dd class="tb bgtbg" style="width: 226px;">
	<div class="ctitem1tl1">配件分类</div>
	</dd>

	<dd class="tr bgtright"></dd>
	<dd class="bg bgbg" style="width: 238px;">
	<div class="ctitem1gs">
			<c:if test="${not empty fFittingtypebase }">
						<c:forEach var="fbase" items="${fFittingtypebase}" varStatus="status">			
			<dl class="ctitem1">
				<dd class="limg"></dd>
				<dd class="ltxt">${fbase.name }</dd>
				<dd class="floatend"></dd>
			</dl>
			<c:if test="${status.last==true}"> 
				 <div class="ctitem1c2">
			</c:if>
			<c:if test="${status.last!=true}"> 
					<div class="ctitem1c">
			</c:if>					
							<windfone:peijian attriName="peijianls" fittingtypebaseId="${fbase.id }"></windfone:peijian>
							<c:if test="${not empty peijianls }"> 
							<c:forEach var="pj" items="${peijianls}" varStatus="status">
							<dl>
								<dd class="limg2"></dd>
								<dd class="ltxt"><a href="pjFenlei.action?fittingTypeId=${pj.id}" >${pj.name }</a></dd>
								<dd class="floatend"></dd>
							</dl>
							</c:forEach>
					 		</c:if>
					</div>
	</c:forEach>
	</c:if>
	<!-- 					
	<dl class="ctitem1">
		<dd class="limg"></dd>
		<dd class="ltxt">手机周边配件</dd>
		<dd class="floatend"></dd>
	</dl>
		<div class="ctitem1c2">
			<dl>
				<dd class="limg2"></dd>
				<dd class="ltxt"><a href="/fenlei/peijian/61.action" title="手机壳">手机壳</a></dd>
				<dd class="floatend"></dd>
			</dl>
		</div>
		-->
	</div>


	</dd>
	<dd class="bl bgbleft"></dd>
	<dd class="bb bgbbg" style="width: 226px;"></dd>
	<dd class="br bgbright"></dd>
	<dd class="floatend"></dd>
</dl>

</div>
<!-- lef end -->
	<div class="right">
		<dl class="box2">
		<dd class="tl ygtleft"></dd>

			<dd class="tb ygtbg" style="width:686px;">
				<div id="ctl00_cpBody_upRXSort">
				<div class="tl1">热销配件</div>
				<%--
				<dl class="dl1">
					<dd class="img"><a href="javascript:SortData('hit')" title="按商品价格排序"><img id="ctl00_cpBody_hitSortImg" src="../../Images/sort_hit_up2.png" style="border-width:0px;" /></a></dd>
					<dd class="img"><a href="javascript:SortData('date')"><img id="ctl00_cpBody_dateSortImg" src="../../Images/sort_date_up2.png" style="border-width:0px;" /></a></dd>
					<dd class="img"><a href="javascript:SortData('price')"><img id="ctl00_cpBody_priceSortImg" src="../../Images/sort_price_up2.png" style="border-width:0px;" /></a></dd>
					<dd class="txt">排序：</dd>

					<dd class="floatend"></dd>
				</dl>
				--%>
				<div class="floatend"></div>
			</div>
			</dd>
			<dd class="tr ygtright"></dd>
			<dd class="bg ygbg" style="width:695px;">
			<div id="ctl00_cpBody_upRXList">
			<div   class="pjlist">
				<c:if test="${not empty fittingList }">
				<c:forEach var="bean" items="${fittingList}" varStatus="status">
					<ul class="dl_glist" style="width:126px;">
					  <li class="img">
		    		  		<a href="pjDetail.action?peijianId=${bean.id }"><img src="<%=contextPath %>/${bean.imagepath}" style="width:70px; height:90px;" />
		    		 		</a>
		  				</li>
		  				<li>
		    				<a href="pjDetail.action?peijianId=${bean.id }">${ bean.typeName}</a>
						</li>
		  				<li class="peijianPrice">￥${bean.price }</li>
					</ul>	
				</c:forEach>
				</c:if>							 
			<dl class="floatend"></dl>
			 
			</div>
			

				
</div>
			</dd>
			<dd class="bl ygbleft"></dd>
			<dd class="bb ygbbg" style="width:684px;"></dd>
			<dd class="br ygbright"></dd>
			<dd class="floatend"></dd>
		</dl>
		<div style="height:10px;"></div>
		<%--
		 
		<dl class="box2">

			<dd class="tl ygtleft"></dd>
			<dd class="tb ygtbg" style="width:727px;"><div class="tl2" title="手机配件,手机电池,手机内存卡,手机数据线,手机套,手机外壳,手机原装配件">已下市配件</div></dd>
			<dd class="tr ygtright"></dd>
	
			<dd class="bg ygbg" style="width:739px;">
				<div class="pjlist">
					
					<dl class="floatend"></dl>
				</div>
			</dd>

			<dd class="bl ygbleft"></dd>
			<dd class="bb ygbbg" style="width:727px;"></dd>
			<dd class="br ygbright"></dd>
			<dd class="floatend"></dd>
				
		</dl>
	--%>
	</div>
	<div class="floatend"></div>


</div>
 <%@ include file="bottom.jsp" %>

</div>
 <div style="width:950px;height: 15">&nbsp;</div>
 
</body>
<script>
	var leftDiv = $("#leftDiv");
	if ( leftDiv.height()<480)
		$("#leftDiv").css("height",480);	
</script>
</html>

